import React, { useState, useEffect } from 'react'
import './index.modules.scss'
import dayjs from 'dayjs'
import { Form, Input, Button, Select, message } from 'antd'
import { getstorelistAll, storeInventoryAdd } from '@/http/api/store'
import { filmListSelect } from '@/http/api/carBrand'
import { number2List, number3List, numberList } from '@/http/api/number'
import { provinceQualitNumber } from '@/components/js/addressOptions'
let optionsFilmType = [
  { value: '漆面膜', label: '漆面膜' },
  { value: '改色膜', label: '改色膜' },
  { value: '车顶膜', label: '车顶膜' },
  { value: '太阳膜', label: '太阳膜' }
]
let serchFilm = {
  appid: localStorage.getItem('appid')
}
const App = () => {
  useEffect(() => {
    getStore()
    getCounterNumber()
    getqutailsCode()
  }, [])
  const [form] = Form.useForm()
  const [messageApi, contextHolder] = message.useMessage()
  const [optionsStore, setOptionsStore] = useState([])
  const [filmNameList, serFilmNameList] = useState([])
  const [customerServiceNumber, SetcustomerServiceNumber] = useState('')
  const [number2ListData, setnumber2List] = useState([])
  const [number3ListData, setnumber3List] = useState([])
  const [numberListData, setnumberList] = useState([])
  let [filmName, setfilmName] = useState('')
  // 添加按钮
  const onFinish = async (data) => {
    if (
      data.lacquerNumber * 1 +
        data.colorAlterationNumber * 1 +
        data.roofNumber * 1 +
        data.sunNumber * 1 >
      data.count
    ) {
      messageApi.error('膜的次数和大于总次数请修改')
    } else {
      data.appid = localStorage.getItem('appid')
      data.filmType = data.filmType
        .replace(/[()]/g, '')
        .replace(/[a-zA-Z]/g, '')
      data.region = data.region.replace(/[()]/g, '').replace(/[a-zA-Z]/g, '')
      let upData = JSON.parse(JSON.stringify(data))
      delete upData.number2
      delete upData.number3
      upData.customerServicePhone = JSON.parse(
        localStorage.getItem('userInfo')
      ).phone
      const res = await storeInventoryAdd(upData)
      messageApi.success(res.data.message)
    }
  }
  // 获取所有门店列表
  const getStore = async () => {
    const res = await getstorelistAll({
      appid: localStorage.getItem('appid'),
      status: 1
    })

    setOptionsStore([
      ...res.data.res.map((item) => {
        return {
          value: item._id,
          label: item.name,
          region: item.region.includes('[')
            ? JSON.parse(item.region)[0]
            : item.region
        }
      })
    ])
  }
  // 获取品检
  // 获取所有门店列表
  const getqutailsCode = async () => {
    const res = await number2List({ size: 100000, page: 1 })
    const res2 = await number3List({ size: 100000, page: 1 })
    const res3 = await numberList({ size: 100000, page: 1 })
    setnumber2List([
      ...res.data.res.map((item) => {
        return {
          value: item.code,
          label: item.code
        }
      })
    ])
    setnumber3List([
      ...res2.data.res.map((item) => {
        return {
          value: item.code,
          label: item.code
        }
      })
    ])
    setnumberList([
      ...res3.data.res.map((item) => {
        return {
          value: item.code,
          label: item.code
        }
      })
    ])
  }
  // 获取客服id
  const getCounterNumber = () => {
    form.setFieldsValue({
      customerService: JSON.parse(localStorage.getItem('userInfo'))
        .customerService
    })
    SetcustomerServiceNumber(
      JSON.parse(localStorage.getItem('userInfo')).customerService
    )
  }
  let num = ''
  let num2 = 0
  // 修改选择后重新获取膜列表
  const getFilmList = async () => {
    const res = await filmListSelect(serchFilm)
    serFilmNameList(
      res.data.res.map((item) => {
        return {
          value: item._id,
          label: item.name,
          ...item
        }
      })
    )
    if (form.getFieldValue().number3 && form.getFieldValue().number2) {
      // let regex = /\b[a-zA-Z]+\b/g
      // let filmTypeNumber = form.getFieldValue().filmType
      // let regionNumber = form.getFieldValue().region
      let number3 = form.getFieldValue().number3
      let number2 = form.getFieldValue().number2
      let number = form.getFieldValue().number
      let QualityNumber = dayjs().format('YYMMDD')

      form.setFieldsValue({
        startNumber: `${num2 == 0 ? filmName : num}${QualityNumber}${number}${number2}-${number3}-001`,
        endNumber: `${num2 == 0 ? filmName : num}${QualityNumber}${number}${number2}-${number3}-`
      })
    }
  }

  // 选择膜
  const selectFilmName = (data) => {
    num2++
    filmNameList.forEach((item) => {
      if (item.value == data) {
        form.setFieldsValue({
          filmAge: item.age,
          count: item.countAll,
          lacquerNumber: item.lacquerNumber,
          roofNumber: item.roofNumber,
          sunNumber: item.sunNumber,
          colorAlterationNumber: item.colorAlterationNumber
        })
        num = item.nameNumber
        setfilmName(item.nameNumber)
      }
    })
    getFilmList()
  }
  return (
    <div className="center addQualityNumberCenterBox ">
      <div className="centerCar">
        <div className="Card" style={{ minHeight: '41px' }}>
          <Form
            name="basic"
            labelCol={{
              span: 6
            }}
            wrapperCol={{
              span: 16
            }}
            style={{
              maxWidth: 600
            }}
            initialValues={{
              remember: true
            }}
            form={form}
            onFinish={onFinish}
            autoComplete="off"
          >
            <Form.Item
              label="收货门店"
              name="storeId"
              rules={[
                {
                  required: true,
                  message: '请输入'
                }
              ]}
            >
              <Select
                showSearch
                allowClear
                style={{
                  width: '100%'
                }}
                placeholder="请选择"
                filterOption={(input, option) =>
                  (option?.label ?? '')
                    .toLowerCase()
                    .includes(input.toLowerCase())
                }
                options={optionsStore}
                onChange={(data, data2) => {
                  serchFilm.storeId = data
                  form.setFieldsValue({
                    region: data2.region
                  })

                  getFilmList()
                }}
              />
            </Form.Item>
          </Form>
        </div>
        <div className="Card" style={{ minHeight: '41px' }}>
          <Form
            name="basic"
            labelCol={{
              span: 6
            }}
            wrapperCol={{
              span: 16
            }}
            style={{
              maxWidth: 600
            }}
            initialValues={{
              remember: true
            }}
            form={form}
            onFinish={onFinish}
            autoComplete="off"
          >
            <Form.Item
              label="客服编号 "
              name="customerService"
              rules={[
                {
                  required: true,
                  message: '请输入'
                }
              ]}
            >
              <Input
                disabled
                className="inputeStyle"
                placeholder="请输入客服编号"
              />
            </Form.Item>
          </Form>
        </div>
        <div
          className="Card"
          style={{ minHeight: '500px', paddingBottom: '10px' }}
        >
          <div className="detilsCardHader alignCenter">
            <div>产品信息</div>
            <div>{`请填写>`}</div>
          </div>
          <Form
            name="basic"
            labelCol={{
              span: 6
            }}
            wrapperCol={{
              span: 16
            }}
            initialValues={{
              remember: true
            }}
            form={form}
            onFinish={onFinish}
            autoComplete="off"
          >
            <Form.Item
              label="收货地区"
              name="region"
              rules={[
                {
                  required: true,
                  message: '请选择收货地区'
                }
              ]}
            >
              <Select
                className="inputeStyle"
                options={provinceQualitNumber}
                placeholder="请选择收货地区"
                disabled
                // onChange={(data) => {
                //   serchFilm.region = data
                //     .replace(/[()]/g, '')
                //     .replace(/[a-zA-Z]/g, '')
                //   getFilmList()
                // }}
              />
            </Form.Item>
            <Form.Item
              label="产品类型"
              name="filmType"
              rules={[
                {
                  required: true,
                  message: '请选择产品类型'
                }
              ]}
            >
              <Select
                className="inputeStyle"
                options={optionsFilmType}
                placeholder="请选择产品类型"
                onChange={(data) => {
                  serchFilm.filmType = data
                    .replace(/[()]/g, '')
                    .replace(/[a-zA-Z]/g, '')
                  getFilmList()
                }}
              />
            </Form.Item>
            <Form.Item
              label="产品名称"
              name="filmId"
              rules={[
                {
                  required: true,
                  message: '请选择产品'
                }
              ]}
            >
              <Select
                className="inputeStyle"
                options={filmNameList}
                placeholder="请选择产品"
                onChange={(data, data2) => {
                  selectFilmName(data)
                }}
              />
            </Form.Item>
            <Form.Item
              label="分切代码"
              name="number"
              rules={[
                {
                  required: true,
                  message: '请选择大卷代码'
                }
              ]}
            >
              <Select
                className="inputeStyle"
                options={numberListData}
                placeholder="请选择大卷代码"
                onChange={(data, data2) => {
                  getFilmList()
                }}
              />
            </Form.Item>
            {/* 品检 */}
            <Form.Item
              label="品检代码"
              name="number2"
              rules={[
                {
                  required: true,
                  message: '品检代码'
                }
              ]}
            >
              <Select
                className="inputeStyle"
                options={number2ListData}
                placeholder="请选择品检代码"
                onChange={(data, data2) => {
                  getFilmList()
                }}
              />
            </Form.Item>
            <Form.Item
              label="大卷代码"
              name="number3"
              rules={[
                {
                  required: true,
                  message: '请选择大卷代码'
                }
              ]}
            >
              <Select
                className="inputeStyle"
                options={number3ListData}
                placeholder="请选择大卷代码"
                onChange={(data, data2) => {
                  getFilmList()
                }}
              />
            </Form.Item>
            <Form.Item
              label="开始编号"
              name="startNumber"
              rules={[
                {
                  required: true,
                  message: '请输入'
                }
              ]}
            >
              <Input className="inputeStyle" placeholder="请输入开始编号" />
            </Form.Item>
            <Form.Item
              label="结束编号"
              name="endNumber"
              rules={[
                {
                  required: true,
                  message: '请输入'
                }
              ]}
            >
              <Input className="inputeStyle" placeholder="请输入结束编号" />
            </Form.Item>
            <Form.Item
              label="质保年限"
              name="filmAge"
              rules={[
                {
                  required: true,
                  message: '请输入'
                }
              ]}
            >
              <Input className="inputeStyle" placeholder="请输入质保年限" />
            </Form.Item>
            <Form.Item
              label="漆面膜次数"
              name="lacquerNumber"
              rules={[
                {
                  required: true,
                  message: '请输入'
                }
              ]}
            >
              <Input className="inputeStyle" placeholder="请输入漆面膜次数" />
            </Form.Item>
            <Form.Item
              label="车顶膜次数"
              name="roofNumber"
              rules={[
                {
                  required: true,
                  message: '请输入'
                }
              ]}
            >
              <Input className="inputeStyle" placeholder="请输入车顶膜次数" />
            </Form.Item>
            <Form.Item
              label="太阳膜次数"
              name="sunNumber"
              rules={[
                {
                  required: true,
                  message: '请输入'
                }
              ]}
            >
              <Input className="inputeStyle" placeholder="请输入太阳膜次数" />
            </Form.Item>
            <Form.Item
              label="改色膜次数"
              name="colorAlterationNumber"
              rules={[
                {
                  required: true,
                  message: '请输入'
                }
              ]}
            >
              <Input className="inputeStyle" placeholder="请输入改色膜次数" />
            </Form.Item>
            <Form.Item
              label="总贴膜次数"
              name="count"
              rules={[
                {
                  required: true,
                  message: '请输入'
                }
              ]}
            >
              <Input className="inputeStyle" placeholder="请输入总贴膜次数" />
            </Form.Item>
            <Form.Item
              wrapperCol={{
                offset: 8,
                span: 16
              }}
            >
              <Button type="primary" htmlType="submit">
                生成质保编号
              </Button>
            </Form.Item>
          </Form>
        </div>
      </div>
      {contextHolder}
    </div>
  )
}
export default App
